<script setup lang="ts">
import { useRouter } from 'vue-router';
import BaseForm from './base-form.vue'
import BodyForm from './body.vue'
import ExaminationForm from './examination.vue'
// import Plan from './plan.vue'
import { message } from 'ant-design-vue';
import { addOld } from '@/api';
import { formToSubmitParam } from '@/tools/old-form';
import Wrap from '@/components/form-item-wrap/index.vue';
import { labelCol, labelAlign } from '@/const';
// import dayjs from 'dayjs';
import { useOldForm } from '@/hooks';

const router = useRouter();

const { formState, validate, validateInfos } = useOldForm();

const onSave = (form: any) => {
	addOld(formToSubmitParam(form)).then(res => {
		message.success('操作成功');
		router.push(`/personnel/old/detail/${res.Data?.ID || ''}`);
	});
};

const submit = () => {
	validate().then(() => {
		onSave(formState);
	})
}

</script>

<template>
	<div class="form-wrap person-add-form">
		<a-form class="base-form" :label-col="labelCol" :label-align="labelAlign">
			<Wrap title="基础信息">
				<BaseForm :validateInfos :formState add></BaseForm>
			</Wrap>
			<Wrap title="健康信息">
				<BodyForm :validateInfos :formState add></BodyForm>
			</Wrap>
			<Wrap title="体检评估">
				<ExaminationForm :validateInfos :formState add></ExaminationForm>
			</Wrap>
			<!-- <Wrap title="计划">
				<Plan :validateInfos="validateInfos" :formState add></Plan>
			</Wrap> -->
		</a-form>
		<div class="text-center">
			<a-button type="primary" @click="submit" class="mr20">
				完成入住
			</a-button>
			<RouterLink to="/personnel/old">
				<a-button>取消</a-button>
			</RouterLink>
		</div>
	</div>
</template>
<style scoped lang="less">
.person-add-form {
	:deep(.base-form) {
		.ant-form-item {
			margin-inline-end: 0;
			margin-bottom: 20px;
		}
	}
}
</style>
